<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>

		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="html5plus://ready"></script>
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
	<style>
		.shang{
			top: 683px
		}
		.xia{
			top: 405px
		}
	</style>
	</head>
	<body>
		<div id="app">
		
				<van-tabbar v-model="active" @change="tabChange" class="shang" class='shang'>
					<van-tabbar-item icon="home-o">首页</van-tabbar-item>
					<van-tabbar-item icon="apps-o">分类</van-tabbar-item>
					<van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
					<van-tabbar-item icon="manager-o">个人中心</van-tabbar-item>
				</van-tabbar>
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					active: 0,
					views: [
						//name => webviewId
						{
							name: "index",
							url: "index.html"
						},
						{
							name: "Commodityclassification",
							url: "Commodityclassification.html"
						},
						{
							name: "shoppingCatzhong",
							url: "shoppingCatzhong.html"
						},
						{
							name: "personalCenter",
							url: "personalCenter.html"
						}
					],
					shangs:true,
					

				},
				created: function() {
					var _this = this
					document.addEventListener('plusready', function() {
						//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
						var currWebview = plus.webview.currentWebview();
						
						for (var i = 0; i < _this.views.length; i++) {
							var tempWebview = plus.webview.create(_this.views[i].url, _this.views[i].name, {
								top: "0px",
								bottom: "50px",

							})
							currWebview.append(tempWebview);
						}
						plus.webview.show(_this.views[_this.active].name)
					});

					window.addEventListener("resize", function() {
						var height = document.documentElement.clientHeight;
						var width = document.documentElement.clientWidth;
						console.log('可见区域高度:' + height);
						console.log('可见区域宽度:' + width);
						
					});
					var res=currWebview.active;
					vm.tabChanges(res);
				},
				methods: {
					tabChange: function() {
						plus.webview.show(this.views[this.active].name);
					},
					tabChanges: function(res) {
						plus.webview.show(this.views[res].name);
					},
					heights:function(){
					}
				}
			})
		</script>
	</body>
</html>
